<template>
    <el-main v-loading="loading">
        <el-form class="searchBox">
            <el-form-item class="searchBox_item">
                <el-select
                    class="selectStyle"
                    v-model="campaignTemplateType"
                    prop="campaignState"
                    placeholder="模板类型"
                    size="small"
                    @change="checkCampaignTemplateType">
                    <el-option
                        v-for="item in templateTypeList"
                        :key="item.type"
                        :label="item.name"
                        :value="item.type"></el-option>
                </el-select>
            </el-form-item >
            <el-form-item class="searchBox_item">
                <el-input class="inputs" placeholder="活动关键字" size="small" v-model="campaignStyleOrContentDesc"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 40px">
                <el-button type="primary"  size="small" @click="search">搜 索</el-button>
                <el-button type="primary" size="small" @click="addTemplatePage">新增模板</el-button>
                <el-button size="small" @click="resetQuery">重 置</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="dataList"
            border
            :row-key="getRowKeys"
            height="640"
            :header-cell-style="{background:'#afafaf',color:'#606266'}"
            ref="multipleTable"
            @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" reserve-selection width="40"></el-table-column>
            <el-table-column prop="campaignStyle" width="150" label="活动风格"></el-table-column>
            <el-table-column prop="campaignMainImageUrl" width="150" label="活动主图">
                <template slot-scope="scope">
				    <img v-image-preview :src="scope.row.campaignMainImageUrl" width="60" height="60" />
			    </template>
            </el-table-column>
            <el-table-column prop="campaignContentDesc" label="活动主题内容描述"></el-table-column>
            <el-table-column prop="sourceInfo"  label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" @click="handleDel(scope.row)" size="small">删除</el-button>
                    <el-button type="text" @click="handlePreView(scope.row)" size="small">预览</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-row class="footer">
            <el-col :span="12">
                <el-checkbox
                    v-model="checkAll"
                    :disabled="!dataList.length"
                    @change="handleCheckAllChange">全选
                </el-checkbox>
            </el-col>
            <el-col :span="12">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="10"
                    background
                    class="text_align_right"
                    :disabled="!dataList.length"
                    :total="count"
                    layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-col>
        </el-row>

		<el-dialog title="预览" width="60%" destroy-on-close @close="handleClose" :visible.sync="openPreviewPage">
				<template-preview
                    ref="preview"
                    :transData="templateInfo"
                    @ClosePreviewPage="handleClose">
                </template-preview>
		</el-dialog>

		<el-dialog
            title="添加活动模板"
            width="60%"
            @close="handleCloseAction"
            :visible.sync="showTemlatePage"
            destroy-on-close :close-on-click-modal="false">
			<temlpate-action
                ref="templateRef"
                :infoData="templateInfo"
                @func="closeTemplatePage">
            </temlpate-action>
		</el-dialog>
    </el-main>
</template>

<script>
    import temlpateAction from './temlpateAction.vue';
    import templatePreview from './preview.vue';
    import {
        getTemplateList,
        templateDelete
	} from "@/api/table";

    export default {
        name: "CAMPAIGN_TEMPLATE",
        data() {
            return {
                count: 0,
                checkAll: false, // 全选
                openPreviewPage: false, // 预览
                templateTypeList: [{
					name: '积分兑红包',
					type: 1,
				},
				// {
				// 	name: '积分兑红包',
				// 	type: 2,
				// }, {
				// 	name: '积分兑红包',
				// 	type: 3,
				// }
				],
                dataList: [],
                loading: true,
                page: 1,
                campaignTemplateType: 1,
                campaignStyleOrContentDesc:'',
                showTemlatePage: false,
                templateInfo: {},
            }
        },
        components: {
            temlpateAction,
            templatePreview
        },
        mounted() {
            this.getData()
        },
        methods: {
            // 搜索
            search(){
                this.getData();
            },
            //加载第几页
            handleCurrentChange(val) {
                this.page = val;
                //修改页数，重新加载
                this.getData();
            },
            //右下按钮全选，切换保证和表格的全选一致
            handleCheckAllChange(val) {
                if (this.checkAll) {
                    this.$refs.multipleTable.toggleAllSelection();
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            resetQuery(){
                this.campaignTemplateType = 1;
                this.campaignStyleOrContentDesc = '';
                this.page = 1;
                this.getData();
            },
            handlePreView(info = {}) {
                this.templateInfo = info;
                this.openPreviewPage = true;
                // 同步数据
				this.$nextTick(() => {
					this.$refs.preview.updateData()
				})
			},
			handleClose() {
                console.log(this.templateInfo)
                this.handleCloseAction()
                this.openPreviewPage = false;
            },

            handleCloseAction() {
                this.templateInfo = {}
            },
            //
            checkCampaignTemplateType(e) {
                this.campaignTemplateType = e
            },
            addTemplatePage() {
                this.showTemlatePage = true
            },
            closeTemplatePage(data) {
                this.handleCloseAction()
                this.showTemlatePage = data.action;
                data.refresh && this.getData();
            },
            // 监听选择的内容
            handleSelectionChange(val) {
                this.checkAll = this.dataList.length === val.length
            },
            // 给表格每行增加一个唯一 标识，用作切换分页后保留被选中行的信息
            getRowKeys(row) {
                return row.campaignTemplateUid;
            },
            // 获取数据
            getData() {
                getTemplateList({
                    campaignTemplateType: this.campaignTemplateType,
                    campaignStyleOrContentDesc: this.campaignStyleOrContentDesc,
                    page: this.page - 1
                }).then(result => {
                    if(result.data.isSuccessful === "Y"){
                        const { count, list } = result.data.data;
                        this.count = count;
                        this.dataList  = list;
                    }
                    if (this.loading) {
                      this.loading = false
                    }
                }).catch(err => {});
            },
            // 编辑
            handleEdit(info) {
                this.templateInfo = info;
                console.log(info, this.templateInfo)
                this.addTemplatePage();
                // 同步数据
				this.$nextTick(() => {
					this.$refs.templateRef.updateData()
				})
            },
            handleDel(info) {
                this.$confirm("是否删除该模板?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
					templateDelete({
                        campaignTemplateUid: info.campaignTemplateUid,
                    }).then(result => {
                        if(result.data.isSuccessful !== "Y"){
                            this.$message.error(result.data.message);
                            return
                        }

                        this.$message.success(result.data.message);
                        this.getData();
                    }).catch(err => {});
				}).catch(() => {
					this.$message({
						type: "info",
						message: "已取消移除"
					});
				});
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>
